<template>
	<tui-list-cell>
		<view class="tui-line-cell">
			<view class="tui-title" id="boxId" ref='canvasBox'>
				<canvas class="canvas-divider" canvas-id="myCanvas"></canvas>
			</view>
		</view>
	</tui-list-cell>
</template>

<script>
	export default {
		props: {

			label: {
				type: String
			},
			emData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			options: {
				type: Object,
				default: () => {
					return {}
				}
			},
			rules: {
				type: Array,
				default: () => {
					return []
				}
			},
			model: {
				type: String,
			},
			keyStr: {
				type: String,
			}
		},
		data() {
			return {
				canvasWidth: 0,
				canvasHeight: 0,
				lableSize: {}
			}
		},
		mounted() {
			this.lableSize = this.getTextSize(this.emData.label);
			this.canvasWidth = this.$refs.canvasBox.$el.clientWidth;
			this.canvasHeight = this.$refs.canvasBox.$el.clientHeight;
			this.drawDivider()

			const that = this
			window.onresize = function() {
				that.canvasWidth = document.getElementById('boxId').offsetWidth;
				that.canvasHeight = document.getElementById('boxId').offsetHeight;
				that.drawDivider()
			}
		},
		methods: {
			//获取文字宽度
			getTextSize(text) {
				var span = document.createElement("span");
				var result = {};
				result.width = span.offsetWidth;
				result.height = span.offsetHeight;
				span.style.visibility = "hidden";
				span.style.fontSize = "20px";
				span.style.fontFamily = "Arial";
				span.style.display = "inline-block";
				document.body.appendChild(span);
				if (typeof span.textContent != "undefined") {
					span.textContent = text;
				} else {
					span.innerText = text;
				}
				result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
				result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
				return result;
			},
			drawDivider() {
				const ctx = uni.createCanvasContext('myCanvas');
				ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); //清除画布 
				ctx.beginPath()
				ctx.moveTo(0, this.canvasHeight / 2);
				ctx.lineTo(this.canvasWidth, this.canvasHeight / 2);
				ctx.setStrokeStyle('#E8E8E8')
				ctx.setLineWidth(1)
				ctx.stroke();
				ctx.closePath()

				let x = 20;
				let startX = 0;
				let endX = 0;
				if (this.emData.options.orientation == "left") {
					startX = x;
					endX = startX + this.lableSize.width + 10
				} else if (this.emData.options.orientation == "right") {
					startX = this.canvasWidth - this.lableSize.width - 10
					endX = this.canvasWidth - x
				} else {
					startX = this.canvasWidth / 2 - (this.lableSize.width / 2)-5;
					endX = this.canvasWidth / 2 + (this.lableSize.width / 2)+5
				}
				ctx.beginPath()
				ctx.setLineWidth('10')
				ctx.moveTo(startX, this.canvasHeight / 2);
				ctx.lineTo(endX, this.canvasHeight / 2);
				ctx.setStrokeStyle('#fff')
				ctx.stroke();

				ctx.setFontSize(15)
				ctx.setFillStyle('#333333')
				ctx.setTextAlign('center')//用于设置文字的对齐,可选值 'left'、'center'、'right'
				ctx.setTextBaseline('middle')//用于设置文字的水平对齐,可选值 'top'、'bottom'、'middle'、'normal'
				ctx.fillText(this.emData.label, startX+5+(this.lableSize.width / 2), this.canvasHeight / 2 )
				console.log(this.canvasWidth, this.lableSize.width, startX, endX)

				ctx.draw();
			}

		}
	}
</script>

<style lang="scss">
	.tui-line-cell {
		width: 100%;
		height: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 100%;
		height: 32rpx;
	}

	.canvas-divider {
		width: 100%;
		height: 100%;
	}
</style>
